<template>
    <div class="app">
        
        <h1>{{ message }}</h1>
        <button @click="message = '你好'" >改变</button>
        <button @click="isShow = !isShow">unmounted</button>
        <life-home v-if="isShow"></life-home>
    </div>
  
</template>

<script>
import LifeHome from './LifeHome.vue'
export default {
  components: { LifeHome },
  data() {
    return {
        message: "hello world",
        isShow: true
    }
  },
    //1.组件被创建之前
  beforeCreate() {
    console.log("beforeCreate")
  },
  //2.组件创建完成
  created() {
    console.log("created")
    console.log("1.发送网络请求，请求数据")
    console.log("2.监听eventbus事件")
    console.log("3.监听watch数据")

  },

  //3.组件准备被挂载
  beforeMounte() {
    console.log("beforeMounte")
  },
  // 组件template元素被挂载：虚拟DOM -- 渲染成真实DOM
  mounted() {
    console.log("mounted")
    console.log("1.获取DOM")
    console.log("2.使用DOM节点")
  },
  //5.数据发生变化
//   5.1准备更新DOM
  beforeUpdate() {
    console.log("beforeUpdate")
  },
//   5.2更新DOM
  updated() {
    console.log("updated")
  },
// 6. 卸载VDOM(虚拟DOM)  --> DOM元素
// 6.1DOM元素被卸载前
  beforeMounte() {
    console.log("beforeUnmounte")
  },
  //6.2DOM元素被卸载完成
  unmounted() {
    console.log("unmounted")
  }

}
</script>

<style>

</style>